a function passed into another function as an argument
This callback function is then invoked inside the outer function to complete some kind of routine or action.
This technique allows a function to call another function. A callback function can run after another function has finished.
JavaScript functions are executed in the sequence they are called, and Not in the sequence they are defined.
Callbacks are commonly used in asynchronous programming to handle tasks that take time, such as reading files, making network requests, or waiting for user input.
example: call back function
code:
<div>
<p class="spec" style="margin-left:5vw;margin-top: 1vw;" id="callback01"></p>
<p class="spec" style="margin-left:5vw;margin-top: 1vw;" id="callback01A"></p>
<p class="spec" style="margin-left:5vw;margin-top: 1vw;" id="callback01B"></p>
<p class="spec" style="margin-left:5vw;margin-top: 1vw;" id="callback01C"></p>
</div>
<script>
function greet(name, callback) {
console.log('Hi' + ' ' + name);
document.getElementById("callback01").innerHTML = "Hi" + " " + name;
callback();
}
// callback function
function callMe() {
console.log('I am a callback function');
document.getElementById("callback01A").innerHTML = "I am a callback function."
}
// passing function as an argument
greet('Peter', callMe);
let callback = function() {
console.log("Done!");
document.getElementById("callback01B").textContent = "Done!"
}
setTimeout(callback, 2000);
setTimeout(function() {
console.log("Well done!");
document.getElementById("callback01C").textContent = "Well done!"
}, 3000);
</script>
how callback functions work
A function accepts another function as an argument (the callback).
The parent function performs some operation (often asynchronous).
Once the operation is complete, the callback function is invoked.
example:
function greet(name, callback) {
console.log(`Hello, ${name}!`);
callback(); // Execute the callback function // Hello, Alce!
}
function sayGoodbye() {
console.log("Goodbye!"); // Goodbye
}
greet("Alice", sayGoodbye);
"greet" is the parent function that takes a name and a callback function as arguments. After logging the greeting, it calls the callback function (sayGoodbye).
When to use callbacks?
Callbacks make sure that a function is not going to run before a task is completed, but will run right after the task has completed. It helps to develop asynchronous JavaScript code and keeps it safe from problems and errors.
example: when to use call back functions
code:
<div>
<p class="spec" style="margin-left:5vw;margin-top: 1vw;" id="callback02"></p>
<p class="spec" style="margin-left:5vw;margin-top: 1vw;" id="callback02A"></p>
<p class="spec" style="margin-left:5vw;margin-top: 1vw;" id="callback02B"></p>
<p class="spec" style="margin-left:5vw;margin-top: 1vw;" id="callback02C"></p>
</div>
<script>
// callback will be executed just after ending of add() function
function add(a, b , callback){
document. getElementById("callback02").innerHTML = `The sum of ${a} and ${b} is ${a+b}.` +"<br>";
callback();
}
// disp() function is called just after the ending of add() function
function disp(){
document.getElementById("callback02A").innerText = 'This must be printed after addition';
}
// Calling add() function
add(5,6,disp);
function adder(c, d , callback1){
document.getElementById("callback02B").innerHTML = `The sum of ${c} and ${d} is ${c+d}.` +"<br>";
callback1();
}
adder(15,16,function disp(){
document.getElementById("callback02C").innerHTML= 'This must be printed after the addition is finished.';
});
</script>
Callback as an arrow function
Using callback function as an ES6 arrow function can reduce lines of code.
